<template>
	<div class="product">
		<maining :tablist="productList" :showi="showi" @ontab="ontab" title="产品介绍">
			<template v-slot:title>
				<div v-if="!showMobile" class="is-wb is-tc is-m-b3" style="padding: 45px 15px 0 15px;">
					<div style="font-size: 30px;margin-bottom: 10px;">
						{{productList[showi].title}}
					</div>
					<!-- <div class="is-f-12" style="color: #969696;">
						<span>类别：{{productList[showi].title}} <span
								class="is-m-l1">日期：{{productList[showi]?.update_time}} </span> <span
								class="is-m-l2">我要分享</span></span>
					</div> -->
				</div>
			</template>
			<template v-slot:main>
				<div class=""  :style="{'padding':showMobile?'15px':'45px 15px'}">
					<div class="" style="color: #333;line-height: 25px;">
						<div v-html="productList[showi]?.content"></div>
					</div>
				</div>
			</template>
		</maining>
	</div>
</template>

<script lang="ts" setup>
	import maining from '@/components/main.vue'
	import { storeToRefs } from 'pinia'
	import useAppStore from '@/store/modules/home'
	import { service } from '@/request/http'
	import { isMobile } from '@/utils/index'
	const {
		productList
	} = defineProps({
		productList: { // 应用
			type: Array,
			default: () => {
				return []
			}
		},

	})
	const store = storeToRefs(useAppStore())
	const showi = store.showi
	const ontab = (i : any) => {
		useAppStore().onshowi(i)
	}
	const showMobile = ref(null)
	onMounted(() => {
		showMobile.value = isMobile() //true 移动端 false pc
	})
</script>

<style lang="scss" scoped>
	.product {}
</style>